
<template>
    <div>
        <div class="tree-box">
                <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="margin:10px auto;">
                </el-input>
                <el-tree
                    ref="tree"
                    :data="treeSetting.data"
                    :props="treeSetting.defaultProps"
                    show-checkbox
                    node-key="id"
                    default-expand-all
                    check-strictly
                    highlight-current
                    @check-change="handleClick" 
                    :filter-node-method="filterNode"
                    :render-content="renderContent"
                    >
                </el-tree>
        </div>
    </div>
</template>
<script>
export default {
    props:["treeSetting"],
    data() {
        return {
            i:2,
            filterText:'',
        }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
        
        //单选
        handleClick(data,checked, node) {
            this.i++
            if(this.i%2==0){
                if(checked){
                    this.$emit('handleTreeNode',data.id,this.treeSetting.treeParams)
                    this.$refs.tree.setCheckedNodes([]);
                    this.$refs.tree.setCheckedNodes([data]);
                    //交叉点击节点
                }else{
                    this.$refs.tree.setCheckedNodes([]);
                    //点击已经选中的节点，置空
                }
            }else{
                if(checked){
                    this.$emit('handleTreeNode',data.id,this.treeSetting.treeParams)
                }
            }
        },
        //搜索
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        //渲染函数 jsx
        renderContent(h, { node, data, store }) {
            if(data.children){
                return(
                    <span class="custom-tree-node">
                        <span>{node.label}</span>
                    </span>
                )
            }else{
                return (
                    <span class="custom-tree-node">
                        <span class="icon-box" style="height:15px;width:15px;display:inline-block;overflow:hidden;position:relative;left:-40px;top:1px;">
                          <img src="../../../static/img/class.png" style="width:15px;height:15px;"/> 
                        </span>
                       <span>{node.label}</span>
                    </span>
                )
            }
        }
    }
};
</script>


<style scoped>

</style>